import type { ProDescriptionsItemProps } from '@/components/ProDescriptions';
import ProDescriptions from '@/components/ProDescriptions';
// import React, { useEffect } from 'react';
// import { getOrderDetail } from '@/pages/ReservationOrder/service';
import type { AppListItemDetail } from '../data';

import { getApplinksByid } from '../service';
// import { ReservationOrderStatusParse, ReservationState } from '../utils/utils';
// useEffect(()=>{
//     const res=
// },[])

const AppListDetail: React.FC<{ id: string }> = ({ id = '' }) => {
  const columns: ProDescriptionsItemProps<AppListItemDetail | undefined>[] = [
    {
      label: '小程序名称',
      dataIndex: 'name',
      render: (_, record) => record?.name || '',
    },
    {
      label: 'AppID',
      dataIndex: 'appId',
      render: (_, record) => record?.app_id || '',
    },
    {
      label: '小程序链接',
      dataIndex: 'links',
      render: (_, record) => record?.links || '',
    },
    {
      label: '小程序图标',
      dataIndex: 'icon',
      span: 1,
      render: (_, record) =>
        record?.icon ? (
          <>
            <br />
            <img src={record?.icon} style={{ width: '150px', height: '150px' }} />
          </>
        ) : (
          ''
        ),
    },
  ];
  return (
    <ProDescriptions
      columns={columns}
      column={1}
      layout="vertical"
      request={() => getApplinksByid(id)}
    />
  );
};
export default AppListDetail;
